<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13.promise</title>
</head>

<body>
  1.Promise三种状态：pending fulfilled rejected

    pending -> fulfilled 
    pending -> rejected 
    变化是不可逆的

  2.状态的表现：
    pending状态，不会触发then和catch
    fulfilled状态，会触发后续的then回调函数
    rejected状态，会触发后续的catch回调函数

  3.then和catch改变状态
    then正常返回resolved，里面有报错则返回rejected
    catch正常返回resolved，里面有报错返回rejected

  4.Promise总结
    三种状态，状态的表现个变化
    then和catch对状态的影响（重要）
    then和catch的链式调用（常考）


  <script>
    // 1. promise加载一张图片
    /* function loadImg(src) {
      return new Promise((resolve, reject) => {
        const img = document.createElement('img')
        img.onload = function() {
          resolve(img)
        }

        img.onerror = () => {
          const err = new Error(`图片加载失败 ${src}`)
          reject(err)
        }

        img.src = src
      })
      
    }

    const url = 'http://hbimg.huabanimg.com/3295eee156523d2aac54e36f0ff13b3a7e0d3a221a7c-joGTzz_fw658/format/webp'
    loadImg(url).then(img => {
      console.log(img.width);
      return img
    }).then(img => {
      console.log(img.height);
    })
    .catch(err => {
      console.log(err);
    }) */

    // 面试题1
   /*  Promise.resolve().then(() => {
      console.log(1); // 1
    }).catch(() => {
      console.log(2);
    }).then(() => {
      console.log(3); // 3
    }) // resolved Promise */

    // 面试题2
    /* Promise.resolve().then(() => {
      console.log(1); // 1
      throw new Error('error1')
    }).catch(() => {
      console.log(2); // 2
    }).then(() => {
      console.log(3); // 3
    }) // resolved */

    // 面试题3
    Promise.resolve().then(() => {
      console.log(1); // 1
      throw new Error('error1')
    }).catch(() => {
      console.log(2); // 2
    }).catch(() => {
      console.log(3);
    })





  </script>

</body>

</html>